import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, Upload, Row, Col } from 'antd';

const mapStateToProps = (state: any) => ({
    account: state.account,
    loading: state.loading.effects['collectionGroupDetail/postObjWithRes'],
});
class ExportModal extends PureComponent<any, any> {

    formRef = React.createRef<FormInstance>();

    constructor(props: any) {
        super(props);
        this.state = {
          fileList: [],
          fileUrl: "",
        };
    }
    componentWillMount() {

      }
    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
          type: 'collectionGroupDetail/getData',
          payload: { url: '/common/template/detail', templateCode: 'dataCollectionImport' },
          callback: (res: any) => {
            this.setState({ fileUrl: res.data ? res.data.templateUrl : null });
          },
        });
    }

    sendConfig = () => {
      const { closeModal } = this.props;
      closeModal();
    }

    ok = (values: any) => {
      const { closeModal } = this.props;
      closeModal();
    };

    close = () => {
        const { closeModal } = this.props;
        closeModal();
    };
    render() {
        const { modalVisible, loading } = this.props;
        const {fileUrl} =this.state;
        const footer = (
            <div>
                <Button  onClick={this.close}>取消</Button>
                <Button  loading={loading} onClick={this.sendConfig} type="primary">确认</Button>
            </div>
        );
        return (
            <Modal
                style={{ top: 20 }}
                footer={footer}
                title="批量导入采集车辆"
                visible={modalVisible}
                onCancel={this.close}
            >
                 <Row>
              <Col span={4}>
                <Upload 
                  accept=".xls,.xlsx,application/vnd.ms-excel"
                  multiple={false}
                  >
                    {
                        <Button type="primary" disabled>
                            导入
                        </Button>
                        }
                </Upload>
                </Col>
                <Col span={4}>
                <span >
                {fileUrl === '' ? (
                      <a disabled title="点击下载模板文件">
                        暂无模板下载
                      </a>
                    ) : (
                      <a href={fileUrl} title="点击下载模板文件">
                        模板下载
                      </a>
                    )}
                </span>
                </Col>
             </Row>
            </Modal>
        );
    }
}
export default connect(mapStateToProps)(ExportModal);